import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/compents/login_widget.dart';
import 'package:flutter_app/controller/login/login_controller.dart';
import 'package:flutter_app/route/routes_page.dart';
import 'package:flutter_app/theme/app_text.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final loginKeyState = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Theme(
        //主题ThemeData.light()//指定主题，有白色黑色两种可能
        data: ThemeData.light(),
        child: Stack(
          //返回按钮
          children: [
            Image.asset("assets/images/bg_login_header.png", fit: BoxFit.cover, width: double.infinity),
            //BoxFit:fill:充满父容器,.contain:尽可能大，保持图片分辨率,cover:充满容器，可能会被截断,.none:图片居中显示，
            // 不改变分大小，可能会被截断,fitWidth:图片填满宽度，高度可能会被截断,fitHeight:图片填满高度，宽度可能会被截断,
            // scaleDown:图片可以完整显示，但是可能不能填充满
            SingleChildScrollView(
              child: Column(
                children: [
                  SizedBox(height: 250.h),
                  // ClipXXX 相关的组件， 来实现一些 圆角矩形/圆形形状十分的方便，那如果想要实现一些奇形怪状的 Widget，例如 五角星/圆弧形之类的，那就只能用 ClipPath了。
                  ClipPath(
                    clipper: LoginClipper(),
                    child: LoginBodyWidget(),
                  )
                ],
              ),
            ),
            //SingleChildScrollView组件，SingleChildScrollView和Android中ScrollView类似，都是只能接收一个子组件
            Positioned(
              top: ScreenUtil().statusBarHeight,
              left: 10.w,
              child: IconButton(
                icon: Icon(Icons.close, size: 20.w, color: Colors.black),
                onPressed: () {
                  Get.back();
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

class LoginBodyWidget extends StatelessWidget {
  final _loginKeyState = GlobalKey<FormState>();
  var loginController = Get.find<LoginController>();

  ///验证用户是否为空
  String _validateUserName(value) {
    if (value.isEmpty) {
      return "用户名不能为空";
    }
    return null;
  }

  ///验证密码规则
  String _validdateUserPwd(value) {
    if (value.isEmpty) {
      return "密码不能为空";
    } else if (value.length < 6) {
      return "密码不能少于六位";
    }
    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      //想最大的扩展宽度，可以将宽度值设为double.infinity
      color: Colors.white,
      width: double.infinity,
      padding: EdgeInsets.only(top: 50.h, left: 20.w, right: 20.w),
      child: Form(
        ///Flutter Form、TextFormField及表单验证、表单输入框聚焦
        ///http://www.ptbird.cn/flutter-form-textformfield.html
        key: _loginKeyState,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Obx(() {
              return LoginInput(
                hintText: "用户名",
                prefixIcon: Icon(Icons.person),
                suffixIcon: loginController.isShowClearIcon.value?IconButton(
                        icon: Icon(Icons.cancel),
                        onPressed: () {
                          loginController.clearText();
                        },
                      ):null,
                autovalidateModel: loginController.autovalidateMode.value,
                validator: _validateUserName,
                textEditingController: loginController.userNameController,
              );
            }),
            SizedBox(height: 16),
            Obx(() {
              return LoginInput(
                hintText: "密码",
                prefixIcon: Icon(Icons.lock),
                suffixIcon: IconButton(
                  icon: Icon(loginController.isObscure.value ? Icons.visibility_off : Icons.visibility),
                  onPressed: () {
                    loginController.setObscure(!loginController.isObscure.value);
                  },
                ),
                textEditingController: loginController.userPwdController,
                obscureText: loginController.isObscure.value,
                autovalidateModel: loginController.autovalidateMode.value,
                validator: _validdateUserPwd,
              );
            }),
            SizedBox(height: 30.h),
            LoginButton(
              loginText: KText.loginText,
              onTap: () {
                if (!_loginKeyState.currentState.validate()) {
                  loginController.setAutovalidateMode(AutovalidateMode.always);
                  return;
                }
                //提交登录请求
                loginController.submitForm();
              },
            ),
            SizedBox(height: ScreenUtil().setHeight(20)),
            //注册按钮
            Container(
              width: double.infinity,
              alignment: Alignment.center,
              child: TextButton(
                child: Text(
                  "没有账号?去注册",
                  style: TextStyle(color: Colors.grey),
                ),
                onPressed: () {
                  Get.toNamed(RoutesConfig.REGISTER_PAGE);
                },
              ),
            ),
            SizedBox(height: ScreenUtil().setHeight(20)),
            _buildBottomMenu()
          ],
        ),
      )
    );
  }
  ///底部第三方登录
  Widget _buildBottomMenu() {
    return Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Divider(color: Colors.grey),
          ),
          LoginTypeIconWidget(
            icon: "assets/icon/ic_qq.png",
            onTap: () {
              Get.snackbar("", "QQ登录", snackPosition: SnackPosition.BOTTOM);
            },
          ),
          LoginTypeIconWidget(
            icon: "assets/icon/ic_weixin.png",
            onTap: () {
              Get.snackbar("", "微信登录", snackPosition: SnackPosition.BOTTOM);
            },
          ),
          LoginTypeIconWidget(
            icon: "assets/icon/ic_weibo.png",
            onTap: () {
              Get.snackbar("", "微博登录", snackPosition: SnackPosition.BOTTOM);
            },
          ),
          Expanded(
            child: Divider(color: Colors.grey),
          ),
        ],
      ),
    );
  }
}
